<header class="row">
       <div class="large-4 columns">
            <div class="logo">
				<a href="index.jsp"><img width="150" src="images/logo.png" alt=""></a>
            </div><!-- End Logo -->  
        </div>
        
        <div class="large-4 columns">
            <ul class="top-menu">
                <li><a href="login.jsp"><i class="fa fa-user"></i> Compte</a></li>
                <li><a href="login.jsp"><i class="fa fa-unlock"></i> Inscription</a></li>
                <li><a href="cart.jsp"><i class="fa fa-shopping-cart"></i> 0 articles - $0</a></li>
            </ul>
        </div>
         
        <div class="large-4 columns">
            <ul class="dm-social">
                <li><a href="https://www.facebook.com/" class="fa fa-facebook" title="Facebook">Facebook</a></li>
                <li><a href="https://plus.google.com/‎" class="fa fa-google-plus" title="Google+">Google+</a></li>
                <li><a href="#" class="fa fa-twitter" title="Twitter">Twitter</a></li>
                <li><a href="#" class="fa fa-pinterest" title="Pinterest">Pinterest</a></li>
                <li><a href="#" class="fa fa-linkedin" title="Linkedin">Linkedin</a></li>
                <li><a href="#" class="fa fa-rss" title="Feedburner">RSS</a></li>
            </ul><!-- End Social --> 
        </div>
	</header>

	<div class="wrapper row">
   
		<div class="large-4 columns">
			<aside class="sidebar">
                <nav class="menu clearing-container">
					<ul>
						<li><a href="index.jsp"><i class="fa fa-home"></i> Accueil</a></li>
						<li><a href="#"><i class="fa fa-book"></i> e-shopping</a>
                        <ul>
                            <li><a href="about.jsp">A propos de nous</a></li>
                            <li><a href="services.jsp">Services</a></li>
                            <li><a href="sitemap.jsp">Site map</a></li>
                            <li><a href="login.jsp">Compte</a></li>
                            
                        </ul>				
						</li>
						<li><a href="#"><i class="fa fa-camera-retro"></i> Nouveautés</a>
                        <ul>
                            
                            <li><a href="new-catalogue.jsp">Nouveau catalogue</a></li>
                          
                        </ul>				
						</li> 
						<li><a href="shop.jsp"><i class="fa fa-shopping-cart"></i> Boutique</a>
                        <ul>
                            <li><a href="shop.jsp">Catalogue</a></li>
                            <li><a href="cart.jsp">Mon panier</a></li>
                            <li><a href="checkout.jsp">Caisse</a></li>
                             <li><a href="details.jsp">Détails</a></li>
                        </ul>				
						</li>
						<li><a href="#"><i class="fa fa-th-large"></i> Catégories</a>
                        <ul>
						<!--li><a href="shortcodes.html">Shortcodes</a></li>
						<li><a href="typography.html">Typography</a></li--> 
						<li><a href="#">CatégorieA</a>
							<ul>
								<li><a href="shop.jsp">sous CatégorieA1</a></li>
								<li><a href="shop.jsp">sous CatégorieA2</a></li>
							</ul>
						</li>
						<li><a href="#">CatégorieB</a>
							<ul>
								<li><a href="shop.jsp">sous CatégorieB1</a></li>
								<li><a href="shop.jsp">sous CatégorieB2</a></li>
							</ul>
						</li>
						<li><a href="#">CatéforieC</a>
							<ul>
								<li><a href="#">sous CatégorieC1</a></li>
								<li><a href="#">sous CatégorieC2</a></li>
							</ul>
						</li>
                        </ul>
                        </li>
						<li><a href="blog.jsp"><i class="fa fa-edit"></i> Blog</a>
                        <ul>
                            <li><a href="blog.jsp">Page Blog </a></li>
                        </ul>				
						</li> 
						<li><a href="contact.jsp"><i class="fa fa-envelope"></i> Contact</a></li>
						
					</ul>
				</nav><!-- End Menu -->
                
                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>A propos de e-shopping</span>
                    </h3>
					<p><em><strong>e-shopping</strong> Grâce à une équipe de passionnés constamment à la recherche des innovations et des tendances de consommation, le site a démocratisé l’accès à de nombreux produits et au e-commerce en général</em></p>
                </div>
                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>Récent </span>
                    </h3>
                        <div class="slider">
                            <div class="widget-slider">
                                <ul class="entry slides">
                                <li>
                                    <a href="#"><img src="img/01_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/02_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                <li>
                                    <a href="#"><img src="img/03_portfolio.jpg" alt="" /><span class="magnifier"></span></a>
                                </li>
                                </ul>
                            </div>
                        </div><!-- End Slider Widget -->
				</div>          
                <div class="widget clearing-container">
                    <h3 class="widget-title">
                        <span>Informations</span>
                    </h3>
                        <ul>
                            <li><a title="View all posts filed under News" href="#">Nouvelles</a> </li>
                            <li><a title="View all posts filed under Magazine" href="#">Magazins</a></li>
                            <li><a title="View all posts filed under Shopping" href="#">Livraison procédure</a></li>
                            <li><a title="View all posts filed under Graphic" href="#">Graphique</a> </li>
                            <li><a title="View all posts filed under Updates" href="#">Mise à jour</a> </li>
                        </ul>
                </div>
                                
			</aside><!-- End Sidebar -->
		</div><!-- end large 4 -->